<template>
  <div class="layer-home">
    <Dropdown :trigger="['contextmenu']">
      <VueTree
        ref="treeRef"
        :data="layers"
        :field-names="'name'"
        :parent-select="currentSelectNodeIds"
        @selection-change="layerStore.selectNodes"
        @switch-lock="layerStore.toggleLock"
        @node-drop="layerStore.moveNode"
        @update-text="layerStore.updateNodeText"
      ></VueTree>
      <template #overlay>
        <div
          class="layer-menu-container"
          :style="{
            backgroundColor: themeStyle[theme].backgroundColor1,
            color: themeStyle[theme].textColor1
          }"
        >
          <template v-for="(item, index) in layerMenu" :key="index">
            <div class="layer-menu-item" @click="item.action">
              <span>{{ item.name }}</span>
              <span>{{ item.shortcutKeys }}</span>
            </div>
          </template>
        </div>
      </template>
    </Dropdown>
  </div>
</template>

<script setup lang="ts">
import VueTree from '@renderer/components/vueTree/VueTree.vue'
import { useLayerStore } from '@renderer/store/resourceBar/layer'
import { storeToRefs } from 'pinia'
import { Dropdown } from 'ant-design-vue'
import { useStyleStore } from '@renderer/store/globalStyle/style'

const layerStore = useLayerStore()
const { layers, treeRef, currentSelectNodeIds } = storeToRefs(layerStore)

const styleStore = useStyleStore()
const { theme, themeStyle } = storeToRefs(styleStore)

const layerMenu = [
  {
    name: '创建编组',
    shortcutKeys: 'Ctrl G',
    action: () => {
      layerStore.createGroup()
    }
  },
  {
    name: '取消编组',
    shortcutKeys: 'Ctrl Shift G',
    action: () => {
      layerStore.ungroup()
    }
  },
  {
    name: '锁定',
    shortcutKeys: 'Ctrl L'
  },
  {
    name: '解锁',
    shortcutKeys: 'Ctrl Shift L'
  },
  {
    name: '删除',
    shortcutKeys: 'Delete',
    action: () => {
      layerStore.deleteNode()
    }
  }
]
</script>

<style scoped lang="scss">
.layer-home {
  width: 100%;
  height: 100%;
  padding-top: 5px;
  overflow: auto;

  /* 设置滚动条样式 */
  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #cccccc85;
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: #aaaaaa85;
  }
}

.layer-menu-container {
  width: 160px;
  box-shadow: 0px 0px 10px #0000001a;
  border-radius: 5px;
  font-size: 13px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  .layer-menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
    &:hover {
      background-color: #81818121;
    }
  }
}
</style>
